<template>
	<view>
		<!-- 二维码展示 S -->
		<view class="code-wrap tp-w690" :style="{height:showUrl ? '550rpx': '160rpx'}">
			<text 
				class="num"
				:class="{disable: used || expired}"
			>{{codeStatus}}：{{code}}</text>
			<view class="code" v-if="showUrl">
				<text class="dack" v-if="used">已使用</text>
				<text class="dack" v-if="expired">已失效</text>
				<image  :src="url" mode=""></image>
			</view>
		</view>
		<!-- 二维码展示 E -->
	</view>
</template>

<script>
	export default {
		props: {
			used: {   // 已使用
				type: Boolean,
				default() {
					return false
				}
			},
			expired: {   // 已失效
				type: Boolean,
				default() {
					return false
				}
			},
			timeOut: {
				type: Boolean,
				default() {
					return false
				}
			},
			url: {   // 二维码图片
				type: String
			},
			code: {  // 二维码编号
				type: String
			},
			codeStatus: {
				type: String,
				default() {
					return '凭证码'
				}
			},
			showUrl: {
				type: Boolean,
				default() {
					return true
				}
			},
		},
		data() {
			return {
				
			};
		},
		watch:{
			timeOut(v) {
				console.log('v', typeof v, v);
				if (v) {
					this.used = this.expired = false
				}
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.code-wrap {
	margin-top: 20rpx;
	height: 550rpx;
	border-radius: 12rpx;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 60rpx 0;
	box-sizing: border-box;
	.num {
		font-size: 32rpx;
		&.disable {
			position: relative;
			&::before {
				content: '';
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				width: 100%;
				height: 1px;
				background-color: #333;
			}
		}
	}
	.code {
		height: 360rpx;
		width: 360rpx;
		background-color: pink;
		border-radius: 8rpx;
		overflow: hidden;
		position: relative;
		.dack {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			height: 64rpx;
			width: 160rpx;
			text-align: center;
			line-height: 64rpx;
			background-color: #e6e6e6;
			border-radius: 12rpx;
			z-index: 10;
		}
	}
}
</style>
